<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { ref } from "@vue/reactivity"
import { watch } from "@vue/runtime-core"
const arr=new Array(10000)
const animalType={
  'mie':'🐏',
  'mo':'🐂',
  'miao':'🐱',
}
const jiaoSheng=ref('mie')
const shouldUpdate=ref(0)
// 监听jiaoSheng(输入框中的值)。
// 如果数据发生变化，并且在animalType对象中存在。试图进行更新。否则试图不进行更新。
watch(()=>jiaoSheng.value,()=>{
  if(Object.keys(animalType).includes(jiaoSheng.value)){
    shouldUpdate.value++
  }
})
</script>

<template>
  <HelloWorld  />
  <input type="text" v-model="jiaoSheng">
    <!-- v-memo中值若不发生变化，则不会进行更新 -->
    <ul v-memo="[shouldUpdate]">
        <li class="licss" v-for="item in arr" :key="item"> 
          {{ jiaoSheng }} -- {{ animalType[jiaoSheng] }} 
        </li>
    </ul>
</template>

<style scoped>

</style>
